<template>
  <div>
    <h3>作业1计算器</h3>

    <input type="text" v-model.number="val1" />
    <select name="" id="" v-model="sel">
      <option value="+">+</option>
      <option value="-">-</option>
      <option value="*">*</option>
      <option value="/">/</option>
    </select>
    <input type="text" v-model.number="val2" />
    <button @click="com">=</button>
    <span>{{ res }}</span>
  </div>
</template>
<script>
export default {
  data() {
    return {
      val1: 0,
      val2: 0,
      sel: "+",
      res: 0,
    };
  },
  methods: {
    com() {
      switch (this.sel) {
        case "+":
          this.res = this.val1 + this.val2;
          break;
        case "-":
          this.res = this.val1 - this.val2;
          break;
        case "/":
          this.res = this.val1 / this.val2;
          break;
        case "*":
          this.res = this.val1 * this.val2;
          break;

        default:
          break;
      }
    },
  },
};
// 这里其实省略了一个new vue 所以这个对象就是原来的选项对象
// 组件里的选项对象 跟之前的区别
// 在组件中 没有el了 因为 作用的范围就是自己的template
// data变成了一个函数return一个对象
</script>
